<template>
  <el-dialog
    v-model="dialogVisible"
    title="新增/修改"
    width="480px"
    :before-close="handleClose"
    append-to-body
    destroy-on-close
  >
    <el-form
      label-position="right"
      label-width="80px"
      :model="formModel"
      ref="formInsRef"
      :rules="rules"
    >
      <el-row :gutter="12">
        <el-col :span="24">
          <el-form-item label="名称" prop="label">
            <el-input v-model="formModel.label" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="值" prop="value">
            <el-input v-model="formModel.value" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="类型" prop="type">
            <el-input v-model="formModel.type" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="排序" prop="order">
            <el-input v-model="formModel.order" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="formModel.remark"
              placeholder="请输入"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 6 }"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="js" setup>
import { setModel, omit, filterEmptyAttrByObj } from "@/utils"
import { ref, reactive } from "vue"
import { dictUpsertApi, dictAddApi } from "@/api/dict"
import { ElMessage } from "element-plus"

const emits = defineEmits(["success"])
const dialogVisible = ref(false)
const data = ref()
const formInsRef = ref()
const formModel = reactive({
  id: "",
  label: "",
  value: "",
  type: "",
  order: "",
  remark: "",
})
const rules = reactive({
  label: [{ required: true, message: "请输入" }],
  value: [{ required: true, message: "请输入" }],
  type: [{ required: true, message: "请输入" }],
  order: [{ required: false, message: "请输入" }],
})

const handleClose = () => {
  // done?.()
  formInsRef.value?.resetFields()
  dialogVisible.value = false
}

const open = ({ row } = {}) => {
  Object.assign(formModel, setModel(formModel, row))
  data.value = row
  dialogVisible.value = true
}

const buildParams = (params = {}) => {
  const postParams = {
    ...params,
    ...formModel,
  }
  return filterEmptyAttrByObj(postParams)
}

const submitHandler = async () => {
  const params = buildParams();
  if (params?.id) {
    await dictUpsertApi(params)
  } else {
    await dictAddApi(omit(params, ['id']))
  }
  ElMessage.success("操作成功")
  emits("success")
}

const onClose = () => {
}

const onSubmit = () => {
  if (!formInsRef.value) return
  formInsRef.value.validate(async valid => {
    if (valid) {
      console.log("submit!")
      await submitHandler()
      handleClose()
      emits("success")
    } else {
      console.log("error submit!")
    }
  })
}

defineExpose({
  open,
})
</script>
